<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="74px" class="app-content form-box"  @submit.native.prevent :rules="rules" :model="ruleForm" ref="ruleForm">
            <div>
                <div class="form-title">验证码查询</div>
                 <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">查询条件</span>
                    </div>
                    <div class="form-content">
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="手机号" prop="phone">
                                    <el-input v-model="ruleForm.phone" placeholder="请输入需要查询的手机号" 
                                    :maxlength="11"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item >
                                    <el-button type="primary" @click="search('ruleForm')" :loading="loadingBtn">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div> 
                </div> 
                 <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">查询结果</span>
                    </div>
                     <div class="form-content">
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="手机号">
                                    <span>{{searchPhone}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="验证码">
                                    <span>{{searchCode}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                     </div>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import {sphonecode} from 'api/system';
import validate from '@/utils/validate';

export default {
    components: { Levelbar},
    data() {
        return {
            rules: {
                phone: [...validate.phoneRequired()]
                // phone: [
                //      { required: true, message: '请输入手机号码！', trigger: 'blur' },
                //     { pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/,
                //         message: '请输入正确的联系方式', trigger: 'blur' }
                   
                // ]
            },
            ruleForm: {
                phone: ''
            },
            searchPhone: '',
            searchCode: '',
            loadingBtn: false

        }
    },
    methods: {
        search(ruleForm) {
            this.searchPhone='';
            this.searchCode='';
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {// 验证通过
                    this.loadingBtn=true;
                    let phoneNumber=this.ruleForm.phone + '';
                    sphonecode(phoneNumber).then(res => {
                        this.loadingBtn=false;
                        this.$message.success('查询成功!');
                        this.searchPhone=phoneNumber;// 填上手机号
                        if (res.data.content) {// 如果有验证码
                            this.searchCode=res.data.content// 填上验证码
                        } else {
                            this.searchCode=''
                        }
                       
                    }).catch(() => {
                        // 查询不通
                        this.searchPhone=this.ruleForm.phone;
                        this.loadingBtn=false;
                    });
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
    width: 100% !important;
}
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
.search-phone,.search-indentify{
  border:none !important;
  .el-input__inner{
    border:none !important;
  }
}
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .el-form {
        padding-Top: 30px;
        background: #fff;
        padding-bottom: 170px;
        padding-left: 30px;
        padding-right: 30px;
       
        .box {
            padding-bottom: 10px;
            background: #fff;
        }
      
        .footer {
            text-align: center;
            margin-top: 40px;
        }
    }
    .delBtn {
        display: inline-block;
        height: 36px;
        width: 16px;
        line-height: 36px;
        i {
            cursor: pointer;
        }
    }
    .form-box {
    padding: 0 50px;
    @include showTitle();
        .form-title {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
        }
    }
    .form-content {
            margin: 0 8px;
    }
     .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
        }
}
</style>
